<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/copyright.js"></script>

    <script>
        let indexContent, layedit
        layui.use(['table', 'upload', 'form', 'layedit', 'laydate'], function () {
            let $ = layui.$,
                form = layui.form,
                upload = layui.upload,
                laydate = layui.laydate;
            layedit = layui.layedit

            //执行一个laydate实例
            laydate.render({
                elem: '#begin', type: 'datetime' //指定元素
            });
            laydate.render({
                elem: '#end', type: 'datetime' //指定元素
            });

            //富文本编辑器设置
            layedit.set({
                uploadImage: {
                    url: '/upload/image?' //接口url
                    , type: 'POST' //默认post
                }
            });
            indexContent = layedit.build('detail'); //建立编辑器
            //下拉框选择某一项
            layui.form.on('select(mySelect)', function (data) {
                console.log(data);
            })


            //执行实例
            let uploadInst = upload.render({
                elem: '#image' //绑定元素
                , url: '/upload/image?' //上传接口
                , field: "file"
                , done: function (res) {
                    //上传完毕回调
                    $("#imgUrl").attr("src", "http://localhost:8888/" + res.data);
                    $("#image-show").fadeIn(800)
                    $(".img").val(res.data)
                }
                , error: function () {
                    //请求异常回调
                }
            });

            form.on("submit(addUser)", function (data) {
                let index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
                $.post("/news/save", {
                        id:
                            $(".id").val(),
                        title:
                            $(".title").val(),
                        detail:
                            layedit.getContent(indexContent),
                        img:
                            $(".img").val(),
                        describle:
                            $(".describle").val(),
                    },

                    function (res) {
                        layer.msg("发布成功！", {icon: 1});
                        setTimeout(function () {
                            window.location.href = "/dongtai"
                        }, 1500)
                    }
                )
                return false;
            })
        });
    </script>
</head>
<body>

<div class="layui-container">
    <hr>
    <div>
        <span class="layui-breadcrumb">
            <a href="">社区动态</a>
            <a><cite>发布</cite></a>
        </span>
    </div>
    <hr>
    <div class="layui-row" id="contentArea">
        <form class="layui-form">

            <input type="hidden" class="layui-input id" placeholder="请输入">
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input title" lay-verify="required"
                           placeholder="请输入资讯标题">
                </div>
            </div>
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="image">
                        <i class="layui-icon">&#xe67c;</i>上传
                    </button>
                    <input type="hidden" class="layui-input img">

                </div>
                <div class="layui-input-block" id="image-show" style="display: none;padding-top: 15px;">
                    <img src="" id="imgUrl" style="width: 100%;">
                </div>
            </div>
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input describle" lay-verify="required"
                           placeholder="请输入描述">
                </div>
            </div>

            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">详情</label>
                <div class="layui-input-block">
                    <textarea id="detail" class="detail" style="display: none;"></textarea>
                </div>
            </div>

            <div class="layui-form-item layui-row layui-col-xs12">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="addUser">提交</button>
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


</div>
<div id="navbottomBarId"></div>
</body>
</html>